<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>照片墙</title>
	</head>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		body{
			background-color: rgb(0,102,102)
		}
		ul{
			
			width: 726px;
			/* 上下二十,auto左右自动居中 */
			margin: 20px auto;
			/* 设置列表的样式类型为:啥也没有,能去掉ul中的小圆点 */
			list-style-type: none;
			border: 1px solid red;
			
		}
		li{
			position: relative;
			float: left;
			border: 1px solid red;
			margin: 10px;
			padding: 10px;
			background-color: rgb(204,204,204)
		}
		/* 鼠标在li上悬停的时候让li向右方和上方偏移,实现抖动的效果 */
		/* 且这个相对是相对于自身当前的位置 */
		li:hover{
			position: relative;
			left: -2px;
			top: -2px;
		}
		
		img{
			width: 200px;
			height: 200px;
		}
		.clear-float{
			clear: both;
		}
		p{
			position: absolute;
			bottom: 40px;
			left: 60px;
			text-align: center;
			background-color: yellow;
		}
	</style>
	<body>
		<ul>
			<li>
				<img src="../img/images/01.jpg" />
				<p>Java学习基础</p>
			</li>
			<li>
				<img src="../img/images/02.jpg" />
				<p>Java学习基础</p>
			</li>
			<li>
				<img src="../img/images/03.jpg" />
				<p>Java学习基础</p>
			</li>
			<li>
				<img src="../img/images/04.jpg" />
				<p>Java学习基础</p>
			</li>
			<li>
				<img src="../img/images/05.jpg" />
				<p>Java学习基础</p>
			</li>
			<li>
				<img src="../img/images/06.jpg" />
				<p>Java学习基础</p>
			</li>
			<li>
				<img src="../img/images/03.jpg" />
				<p>Java学习基础</p>
			</li>
		<div class="clear-float">
			
		</div>
		</ul>
	</body>
</html>
